import _ from 'lodash';
import {DFT_ICONS} from "@jzl/icons";
import noImg from '../assets/images/noimage.png'

/**
 * _type: nodeType 节点渲染类型 / 组件，如：list（代表循环） / image, text, icon（内置组件）, JzlFormColor(组件) 等
 * _node: role 节点角色，如 collapseIcon，在组件中充当的功能/角色。会根据这个来个性化添加事件等
 * _tag: 实际渲染标签
 *   _type = text: div / span / i 等自定义真实渲染
 *   _type = list: ul / ol / div 等自定义真实渲染
 *   _type = micro comp: 组件，如：JzlFormColor（组件）组件递归调用死循环时（dync-render 为组件，组件又默认 dync-render）
 */
const formBox = {
  _name: '',
  _node: '',
  _ss: {},
  _sh: {},
  _rh: false,
  _sort: ['icon', 'label', 'body', 'rightIcon'],
  _value: "numberValue",
  _ext: {
    tip: "提示"
  },
  icon: {
    _name: '图标',
    _type: 'icon',
    _node: 'c$ffIcon',
    _ss: {},
    _sh: {},
    _rh: false
  },
  label: {
    _name: '标签',
    _type: 'text',
    _node: 'c$ffLabel',
    _ss: {
      "text": ""
    },
    _sh: {},
    _rh: false
  },
  body: {
    _name: '内容体',
    _node: 'c$ffBody',
    _ss: {},
    _sh: {},
    _rh: false,

    input: {
      _name: '评分',
      _node: '',
      _tag: '',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  },
  rightIcon: {
    _name: '右图标',
    _type: 'icon',
    _node: 'c$ffRightIcon',
    _ss: {},
    _sh: {},
    _rh: false
  }
};

const getPageFormDef = (compInfo) => {
  let iBox = _.cloneDeep(formBox);

  iBox._name = compInfo.name;
  iBox._node = compInfo.compName;
  iBox.body.input = compInfo.input;

  // iBox._value = valueVar;
  iBox.label._ss.text = compInfo.input._name;
  // if(compInfo.label) iBox.label._name = compInfo.label;
  // if (compInfo.value) iBox._value = compInfo.value;
  // if (compInfo.compExt) iBox._ext = _.assignIn({}, iBox._ext, compInfo.compExt);

  if(compInfo.model) iBox._mo = compInfo.model;

  return iBox;
}

const div = {
  component: 'div',
  icon: DFT_ICONS.div,
  name: '容器',
  tip: 'Div',
  micro: true,
  def: {
    _name: '元素',
    _node: "",
    _ss: {
      theme: "ele-div"
    },
    _sh: {},
    _rh: false
  }
};

const box = {
  component: 'c$boxComp',
  icon: DFT_ICONS.box,
  name: 'Box容器',
  tip: 'box',
  micro: true,
  def: {
    _name: 'Box',
    _node: 'c$boxComp',
    _ss: {theme: "ele-box"},
    _sh: {},
    _rh: false,
    _sort: ['header', 'body'],

    header: {
      _name: 'Header',
      _ss: {
        theme: "ele-box-head"
      },
      _sh: {},
      _rh: false,
      _sort: ['icon', 'title', 'refresh', 'more'],

      icon: {
        _name: 'Icon',
        _type: 'icon',
        _ss: {
          theme: "ele-box-head-icon",
          icon: "ri:apps-fill"
        },
        _sh: {},
        _rh: false
      },
      title: {
        _name: 'Title',
        _type: 'text',
        _ss: {
          "theme": "ele-box-title",
          "text": "组件容器"
        },
        _sh: {},
        _rh: false
      },
      refresh: {
        _name: 'Refresh',
        _node: 'icon',
        _ss: {
          "theme": "ele-box-head-more ele-box-head-refresh",
          icon: "ri:refresh-line",
          display: "none",
        },
        _sh: {},
        _rh: false,
        _evts: [{
          "event": "click",
          "type": "triggerEvent",
          "tevtName": "boxHeaderRefresh",
          "tevtParam": ""
        }]
      },
      more: {
        _name: 'More',
        _node: '',
        _ss: {
          "theme": "ele-box-head-more",
        },
        _sh: {},
        _rh: false,
        _sort: ['text', 'icon'],

        text: {
          _name: 'Text',
          _type: 'text',
          _ss: {
            theme: "ele-box-header-more-txt",
            text: '更多'
          },
          _sh: {},
          _rh: false
        },
        icon: {
          _name: 'Icon',
          _type: 'icon',
          _ss: {
            "theme": "ele-box-header-more-icon",
            icon: "ri:arrow-right-s-line"
          },
          _sh: {},
          _rh: false
        }
      }
    },
    body: {
      _name: 'Body',
      _ss: {
        "theme": "ele-box-body"
      },
      _sh: {},
      _rh: false,
    }
  }
};

const text = {
  component: 'text',
  icon: DFT_ICONS.text,
  name: '文字',
  tip: 'Text',
  micro: true,
  def: {
    _name: '文本',
    _type: "text",
    _ss: {
      text: "文本",
      theme: "jpn-text"
    },
    _sh: {},
    _rh: false
  }
};

const icon = {
  component: 'icon',
  icon: DFT_ICONS.icon,
  name: '图标',
  tip: 'Icon',
  micro: true,
  def: {
    _name: '图标',
    _type: "icon",
    _ss: {
      icon: "ri:apps-fill",
      theme: "jpn-icon"
    },
    _sh: {},
    _rh: false
  }
};

const img = {
  component: 'img',
  icon: DFT_ICONS.image,
  name: '图片',
  tip: 'Image',
  micro: true,
  def: {
    _name: '图片',
    _type: "img",
    _ss: {
      image: noImg,
      width: 100,
      height: 50
    },
    _sh: {},
    _rh: false
  }
};

const video = {
  component: 'video',
  icon: DFT_ICONS.video,
  name: '视频',
  tip: 'Video',
  micro: true,
  def: {
    _name: '视频',
    _type: "video",
    _ss: {
      theme: "jpn-video"
    },
    _sh: {},
    _rh: false
  }
};

const buttonComp = {
  component: 'buttonComp',
  icon: DFT_ICONS.btn,
  name: '按钮',
  tip: 'Button',
  micro: true,
  def: {
    _name: '按钮',
    _node: "buttonComp",
    _ss: {
      theme: "" // jzl-button--primary jzl-button--mini
    },
    _sh: {},
    _ext: {size: '', type: '', plain: false, circle: false},
    _rh: false,
    _sort: ['icon', 'text'],

    icon: {
      _name: '图标',
      _type: 'icon',
      _ss: {
        icon: "ri:star-line"
      },
      _sh: {},
      _rh: false
    },
    text: {
      _name: '文字',
      _type: 'text',
      _ss: {
        text: "按钮"
      },
      _sh: {},
      _rh: false
    }
  }
};

const paginationComp = {
  component: 'paginationComp',
  icon: DFT_ICONS.pagination,
  name: '分页',
  tip: 'Pagination',
  micro: true,
  def: {
    _name: '分页',
    _type: "JzlPagePagination",
    _node: "paginationComp",
    // _tag: "",
    // _value: "page",
    _ss: {
      theme: "" // jzl-button--primary jzl-button--mini
    },
    _sh: {},
    _mo: {
      model: {
        var: "page",
        mode: "model",  // model / input /output
        default: 1,
        label: "页码"
      },
      pageSize: {
        var: "pageSize",
        mode: "model",
        default: 10,
        label: "页大小"
      },
      total: {
        var: "totalRecords",
        mode: "input",
        default: 0,
        label: "总记录数"
      },
    },
    _ext: {
      layout: "prev, pager, next, jumper, ->, total",
      small: false,
      background: false,
      pageSizes: "10, 20, 30",
      hideOnSinglePage: false
    },
    _rh: false
  },
  vars: [{
    prop: "page",
    type: "number",
    default: 1,
    force: true,
    initType: "static"
  }, {
    prop: "pageSize",
    type: "number",
    default: 10,
    force: true,
    initType: "static"
  }, {
    prop: "totalRecords",
    type: "number",
    default: 0,
    force: true,
    initType: "static"
  }]
}

const listComp = {
  component: 'listComp',
  icon: DFT_ICONS.list,
  name: '列表',
  tip: 'List',
  micro: true,
  def: {
    // _name: 'Comp-列表',
    // _node: "listComp",
    // _ss: {
    //   theme: "jpn-list txt-nav-list"
    // },
    // _ext: {
    //   loadMode: "fixed"
    // },
    // _sh: {},
    // _rh: false,
    //
    // item: {
      _name: '列表项',
      _type: "list",
      _value: 'list',
      _ss: {
        theme: 'txt-nav-item'
      },
      _sh: {},
      _rh: false,
      _sort: ['image', 'text', 'moreIcon'],

      image: {
        _name: '图片',
        _type: 'img',
        _value: 'image',
        _ss: {
          theme: "txt-nav-img"
        },
        _sh: {},
        _rh: false
      },
      text: {
        _name: '文字',
        _ss: {
          theme: "txt-nav-text"
        },
        _sh: {},
        _rh: false,
        _sort: ['title', 'remark'],

        title: {
          _name: '标题',
          _type: 'text',
          _value: 'title',
          _ss: {
            theme: "txt-nav-title"
          },
          _sh: {},
          _rh: false
        },
        remark: {
          _name: '描述',
          _type: 'text',
          _value: 'remark',
          _ss: {
            theme: "txt-nav-desc"
          },
          _sh: {},
          _rh: false
        }
      },
      moreIcon: {
        _name: '更多图标',
        _type: 'icon',
        _ss: {
          theme: "txt-nav-note",
          icon: 'ri:arrow-right-s-line'
        },
        _sh: {},
        _rh: false
      }
    // }
  },
  vars: [{
    prop: "list",
    type: "json",
    label: "列表",
    default: null,
    force: true,
    initType: "static",
    iTypes: ['static', 'api', 'mapi'],
    iDis: true,
    defaultJson: [{
      image: "/assets/images/bg.png",
      title: "标题A",
      remark: "描述"
    }, {
      image: "/assets/images/bg.png",
      title: "标题B",
      remark: "描述"
    }]
  }]
};

const c$JzlListComp = {
  component: 'c$JzlListComp',
  icon: DFT_ICONS.dyncList,
  name: '高级列表',
  tip: 'List',
  micro: true,
  def: {
    _name: '组件-高级列表',
    _type: "JzlList",
    _node: "c$JzlListComp",
    // _value: "dList",
    _ss: {
      theme: "jpn-list txt-nav-list"
    },
    _ext: {
      loadMode: "fixed",
      dataPath: "dList.datas",
      dataVar: "dList",

      filterType: "lowcode",
      filterFn: "__api_filter",

      getTotalType: "lowcode",
      getTotalFn: "__api_getTotal",

      getPageType: "lowcode",
      getPageFn: "__api_getPage",

      isFinishedType: "lowcode",
      isFinishedFn: "__api_isFinished",

      loadFn: "__api_load",

      pageSize: 20
    },
    _sh: {},
    _rh: false,

    item: {
      _name: '列表项',
      // _type: "list",
      // _value: 'dList.datas',
      _ss: {
        theme: 'txt-nav-item'
      },
      _sh: {},
      _rh: false,
      _sort: ['image', 'text', 'moreIcon'],

      image: {
        _name: '图片',
        _type: 'img',
        _value: 'image',
        _ss: {
          theme: "txt-nav-img"
        },
        _sh: {},
        _rh: false
      },
      text: {
        _name: '文字',
        _ss: {
          theme: "txt-nav-text"
        },
        _sh: {},
        _rh: false,
        _sort: ['title', 'remark'],

        title: {
          _name: '标题',
          _type: 'text',
          _value: 'title',
          _ss: {
            theme: "txt-nav-title"
          },
          _sh: {},
          _rh: false
        },
        remark: {
          _name: '描述',
          _type: 'text',
          _value: 'remark',
          _ss: {
            theme: "txt-nav-desc"
          },
          _sh: {},
          _rh: false
        }
      },
      moreIcon: {
        _name: '更多图标',
        _type: 'icon',
        _ss: {
          theme: "txt-nav-note",
          icon: 'ri:arrow-right-s-line'
        },
        _sh: {},
        _rh: false
      }
    }
  },
  vars: [{
    prop: "dList",
    type: "json",
    label: "列表数据源",
    default: null,
    force: true,
    initType: "static",
    iTypes: ['static', 'api', 'mapi'],
    iDis: true,
    defaultJson: {
      datas: [{
        image: "/assets/images/bg.png",
        title: "标题A",
        remark: "描述"
      }, {
        image: "/assets/images/bg.png",
        title: "标题B",
        remark: "描述"
      }, {
        image: "/assets/images/bg.png",
        title: "标题C",
        remark: "描述"
      }],
      page: {
        page: 1,
        total: 3
      }
    }
  }]
}

const c$navComp = {
  component: 'c$navComp',
  icon: DFT_ICONS.menu,
  name: '菜单',
  tip: 'Nav',
  micro: true,
  def: {
    _name: '组件-菜单',
    _node: 'c$navComp',
    _ss: {
      theme: 'jzl-nav'
    },
    _sh: {},
    _rh: false,
    _ext: {theme: ""},

    grid: {
      _name: '菜单项布局',
      _type: 'list',
      _value: 'navList',
      _resp: {type: 'c24', xsc: 6},

      item: {
        _name: '菜单项',
        _ss: {
          theme: 'jzl-nav-item'
        },
        _sh: {},
        _rh: false,
        _sort: ['icon', 'img', 'title', 'remark'],

        icon: {
          _name: '图标',
          _type: 'icon',
          _value: 'scope:icon',
          _ss: {
            theme: 'jzl-nav-icon',
            icon: "ri:apps-fill"
          },
          _sh: {},
          _rh: false
        },
        image: {
          _name: '图片',
          _type: 'img',
          _value: 'scope:image',
          _ss: {
            theme: 'jzl-nav-image'
          },
          _sh: {},
          _rh: false
        },
        title: {
          _name: '标题',
          _type: 'text',
          _value: 'scope:title',
          _ss: {
            theme: 'jzl-nav-title'
          },
          _sh: {},
          _rh: false
        },
        remark: {
          _name: '描述',
          _type: 'text',
          _value: 'scope:remark',
          _ss: {
            theme: 'jzl-nav-remark'
          },
          _sh: {},
          _rh: false
        }
      }
    }
  },
  vars: [{
    prop: "navList",
    type: "json",
    label: "菜单表",
    default: null,
    force: true,
    initType: "static",
    iTypes: ['static', 'api', 'mapi'],
    iDis: true,
    defaultJson: [{
      icon: "ri:home-3-line",
      title: "首页",
      remark: "描述"
    }, {
      icon: "ri:heart-3-line",
      title: "收藏",
      remark: "描述"
    }, {
      icon: "ri:time-line",
      title: "计时",
      remark: "描述"
    }, {
      icon: "ri:bookmark-3-line",
      title: "标签",
      remark: "描述"
    }]
  }]
};

const sliderComp = {
  component: 'sliderComp',
  icon: DFT_ICONS.swiper,
  name: '轮播',
  tip: 'Slider',
  micro: true,
  def: {
    _name: '组件-轮播',
    _node: "sliderComp",
    _value: "sliderActive",
    _ss: {
      theme: "jpn-swiper",
      height: "240"
    },
    _sh: {},
    _ext: {autoplay: true, vertical: false, multiple: 1, interval: 3000, duration: 500},
    _rh: false,

    slider: {
      _name: '轮播项',
      _type: "slider",
      _node: "slider",
      _value: "sliderList",
      _ss: {},
      _sh: {},
      _rh: false,

      sliderPanel: {
        _node: 'sliderPanel',
        _ss: {
          theme: "jpn-swiper-panel",
          bgType: "color",
          bgColors: ["#ce1111","#008cff","#0ab86f","#d37a07","#76a30c","#b40a2f","#236313","#0044ff","#da0cda","#365e4d"]
        },
        _sh: {},
        _rh: false,

        img: {
          _name: '图片',
          _type: 'img',
          _ss: {
            theme: "jpn-swiper-image"
          },
          _sh: {},
          _rh: false
        },
        text: {
          _name: '文本容器',
          _ss: {
            theme: "jpn-swiper-text",
            top: "40%",
            bottom: "40%",
            left: "20%",
            right: "20%",
          },
          _sh: {},
          _rh: false,
          _sort: ['title', 'remark'],

          title: {
            _name: '标题',
            _type: 'text',
            _value: 'scope:title',
            _ss: {
              theme: "jpn-swiper-title"
            },
            _sh: {},
            _rh: false
          },
          remark: {
            _name: '备注',
            _type: 'text',
            _value: 'scope:remark',
            _ss: {
              theme: "jpn-swiper-remark"
            },
            _sh: {},
            _rh: false
          }
        }
      },
      sliderPage: {
        _node: 'sliderPage',
        _ss: {},
        _sh: {},
        _rh: false,

        bullet: {
          _node: 'bullet',
          _ss: {},
          _sh: {},
          _rh: false,
        }
      },
      sliderPrevBtn: {
        _type: 'icon',
        _node: 'sliderPrevBtn',
        _ss: {
          icon: DFT_ICONS.arrowLeftSimple
        },
        _sh: {},
        _rh: false,
      },
      sliderNextBtn: {
        _type: 'icon',
        _node: 'sliderNextBtn',
        _ss: {
          icon: DFT_ICONS.arrowRightSimple
        },
        _sh: {},
        _rh: false,
      }
    }
  },
  vars: [{
    prop: "sliderActive",
    type: "number",
    default: 0,
    force: true,
    initType: "static"
  }, {
    prop: "sliderList",
    type: "json",
    default: null,
    force: true,
    initType: "static",

    defaultJson: [{
      image: "",
      title: "标题A",
      remark: ""
    }, {
      image: "",
      title: "标题B",
      remark: ""
    }]
  }]
};

const gridComp = {
  component: 'gridComp',
  icon: DFT_ICONS.layoutGrid,
  name: '栅格布局',
  tip: 'Grid',
  micro: true,
  def: {
    _name: '组件-栅格',
    _node: "gridComp",
    _ss: {
      theme: "jpn-grid"
    },
    _sh: {},
    _rh: false,

    grid: {
      _name: '栅格项',
      _type: "grid",
      _node: "grid",
      _value: "gridList",
      _ss: {},
      _sh: {},
      _rh: false,

      img: {
        _name: '图片',
        _type: 'img',
        _ss: { width: '100%', image: noImg },
        _sh: {},
        _rh: false
      }
    }
  },
  vars: [{
    prop: "gridList",
    type: "json",
    default: null,
    force: true,
    initType: "static",

    defaultJson: [{
      image: "/assets/images/bg.png",
      title: "标题A"
    }, {
      image: "/assets/images/bg.png",
      title: "标题B"
    }]
  }]
};

const tabsComp = {
  component: 'tabsComp',
  icon: DFT_ICONS.tabs,
  name: '标签页',
  tip: 'Tabs',
  micro: true,
  def: {
    _name: '组件-标签页',
    _node: 'tabsComp',
    _value: 'tabActive',
    _ss: {},
    _sh: {},
    _rh: false,
    _sort: ['tabs'],
    _ext: {theme: ''},

    tabs: {
      _name: '标签页',
      _node: 'tabs',
      _type: 'tabs',
      _value: 'tabList',
      _ss: {},
      _sh: {},
      _rh: false,
      _sort: ['tabsHeader', 'tabsBody'],

      tabsHeader: {
        _name: '标签',
        _node: 'tabsHeader',
        _ss: {},
        _sh: {},
        _rh: false,

        tabsTab: {
          _name: '标签页标题',
          _node: 'tabsTab',
          _ss: {},

          text: {
            _name: '标签页标题文字',
            _type: 'text',
            _value: 'title',
            _sh: {},
            _rh: false
          }
        }
      },
      tabsBody: {
        _name: '标签页内容体',
        _node: 'tabsBody',
        _ss: {},
        _sh: {},
        _rh: false,
        _anime: {
          enable: true,
          opacity: [0, 1], // 从透明到不透明
          duration: 500, // 动画持续时间
          easing: 'easeInOutQuad', // 缓动函数
          // direction: 'alternate', // 循环播放，来回切换
          // loop: true // 循环播放动画
        },
        tabsPane: {
          _name: '标签页内容',
          _node: 'tabsPane',
          _ss: {},
          text: {
            _name: '标签内容文字',
            _type: 'text',
            _value: 'content',
            _sh: {},
            _rh: false
          }
        },

      }
    }
  },
  vars: [{
    prop: "tabActive",
    type: "number",
    default: 0,
    force: true,
    initType: "static"
  }, {
    prop: "tabList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      title: "Tab 1",
      content: "Tab Content A"
    }, {
      title: "Tab 2",
      content: "Tab Content B"
    }]
  }],
};

const collapseComp = {
  component: 'collapseComp',
  icon: DFT_ICONS.collapse,
  name: '折叠',
  tip: 'Collapse',
  micro: true,
  def: {
    _name: '组件-折叠',
    _node: 'collapseComp',
    _value: 'collActive',
    _ss: {},
    _sh: {},
    _ext: { theme: '', acd: false },
    _rh: false,

    collapse: {
      _name: '折叠项',
      _type: 'collapse',
      _node: 'collapse',
      _value: 'collList',
      _ss: {},
      _sh: {},
      _rh: false,
      _sort: ['collapseHeader', 'collapseBody'],

      collapseHeader: {
        _name: '折叠头部',
        _node: 'collapseHeader',
        _ss: {},
        _sort: ['collapseTitle', 'collapseIcon'],

        collapseTitle: {
          _name: '折叠标题',
          _node: 'collapseTitle',
          _ss: {},

          text: {
            _name: '折叠标题文字',
            _type: 'text',
            _value: 'title',
            _sh: {},
            _rh: false
          }
        },
        collapseIcon: {
          _name: '折叠图标',
          _type: 'icon',
          _node: 'collapseIcon',
          _ss: {
            icon: DFT_ICONS.arrowDownSimple
          }
        }
      },
      collapseBody: {
        _name: '折叠内容',
        _node: 'collapseBody',
        _ss: {},
        _sh: {},
        _rh: false,
        _anime: {
          enable: true,
          opacity: [0, 1], // 从透明到不透明
          duration: 500, // 动画持续时间
          easing: 'easeInOutQuad', // 缓动函数
          // direction: 'alternate', // 循环播放，来回切换
          // loop: true // 循环播放动画
        },
        text: {
          _name: '标签内容文字',
          _type: 'text',
          _value: 'content',
          _sh: {},
          _rh: false
        }
      }
    }
  },
  vars: [{
    prop: "collActive",
    type: "number",
    default: 0,
    force: true,
    initType: "static"
  }, {
    prop: "collList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      title: "Collapse 1",
      content: "Collapse Content A"
    }, {
      title: "Collapse 2",
      content: "Collapse Content B"
    }, {
      title: "Collapse 3",
      content: "Collapse Content C"
    }]
  }],
};


/** 表单组件 **/
const c$checkboxComp = {
  component: 'c$checkboxComp',
  icon: DFT_ICONS.checkbox,
  name: '多选',
  tip: '多选',
  micro: true,
  def: getPageFormDef({
    name: "表单多选组件",
    compName: "c$checkboxComp",
    label: "多选",
    model: {
      value: {
        var: "checkValue",
        mode: "model",
        label: "数据变量"
      },
      options: {
        var: "checkboxList",
        mode: "input",
        label: "选项列表"
      },
      // labelDef: "label",
      // valueDef: "value"
    },

    input: {
      _name: '多选',
      _node: 'c$checkbox',
      _type: 'JzlFormCheckbox',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "checkValue",
    type: "json",
    default: [],
    force: true,
    initType: "static"
  }, {
    prop: "checkboxList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      label: "A",
      value: "A"
    }, {
      label: "B",
      value: "B"
    }, {
      label: "C",
      value: "C"
    }]
  }],
};

const c$colorComp = {
  component: 'c$colorComp',
  icon: DFT_ICONS.color,
  name: '颜色',
  tip: 'Video',
  micro: true,
  def: getPageFormDef({
    name: '表单颜色组件',
    compName: "c$colorComp",
    // value: "colorValue",
    model: {
      value: {
        var: "colorValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '颜色',
      _node: 'c$color',
      _type: 'JzlFormColor',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "colorValue",
    type: "string",
    default: '',
    force: true,
    initType: "static"
  }]
};

const c$fileComp = {
  component: 'c$fileComp',
  icon: DFT_ICONS.pdf,
  name: '文件',
  tip: '颜色',
  micro: true,
  def: getPageFormDef({
    name: '表单文件组件',
    compName: "c$fileComp",
    // value: "fileValue",
    model: {
      value: {
        var: "checkValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '文件',
      _node: 'c$file',
      _type: 'JzlFormFile',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "fileValue",
    type: "object",
    default: {},
    force: true,
    initType: "static"
  }]
};

const c$editorComp = {
  component: 'c$editorComp',
  icon: DFT_ICONS.editor,
  name: '富文本',
  tip: '富文本',
  micro: true,
  def: getPageFormDef({
    name: '表单富文本组件',
    compName: "c$editorComp",
    // value: "editorValue",
    model: {
      value: {
        var: "editorValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '富文本',
      _node: 'c$editor',
      _type: 'JzlFormEditor',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "editorValue",
    type: "string",
    default: '',
    force: true,
    initType: "static"
  }]
};

const c$iconComp = {
  component: 'c$iconComp',
  icon: DFT_ICONS.icon,
  name: '图标',
  tip: '图标',
  micro: true,
  def: getPageFormDef({
    name: '表单图标组件',
    compName: "c$iconComp",
    // value: "iconValue",
    model: {
      value: {
        var: "iconValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '图标',
      _node: 'c$icon',
      _type: 'JzlFormIcon',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "iconValue",
    type: "string",
    default: '',
    force: true,
    initType: "static"
  }]
};

const c$idcardComp = {
  component: 'c$idcardComp',
  icon: DFT_ICONS.idcard,
  name: '身份证',
  tip: '身份证',
  micro: true,
  def: getPageFormDef({
    name: '表单身份证组件',
    compName: "c$idcardComp",
    // value: "idcardValue",
    model: {
      value: {
        var: "idcardValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '身份证',
      _node: 'c$idcard',
      _type: 'JzlFormIdcard',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "idcardValue",
    type: "string",
    default: '',
    force: true,
    initType: "static"
  }]
};

const c$imageComp = {
  component: 'c$imageComp',
  icon: DFT_ICONS.image,
  name: '图片',
  tip: '图片',
  micro: true,
  def: getPageFormDef({
    name: '表单图片组件',
    compName: "c$imageComp",
    // value: "imgValue",
    model: {
      value: {
        var: "imgValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '图片',
      _node: 'c$image',
      _type: 'JzlFormImage',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "imgValue",
    type: "object",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$inputComp = {
  component: 'c$inputComp',
  icon: DFT_ICONS.input,
  name: '输入框',
  tip: '输入框',
  micro: true,
  def: getPageFormDef({
    name: '表单文本组件',
    compName: "c$inputComp",
    label: "输入框",
    // value: "inputValue",

    model: {
      value: {
        var: "inputValue",
        mode: "model",
        label: "数据变量"
      }
    },

    input: {
      _name: '输入框',
      _node: 'c$input',
      _type: 'JzlFormInput',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "inputValue",
    type: "string",
    default: '',
    force: true,
    initType: "static"
  }]
};

const c$linkComp = {
  component: 'c$linkComp',
  icon: DFT_ICONS.link,
  name: '链接',
  tip: '链接',
  micro: true,
  def: getPageFormDef({
    name: '表单链接组件',
    compName: "c$linkComp",
    // value: "linkValue",
    model: {
      value: {
        var: "linkValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '链接',
      _node: 'c$link',
      _type: 'JzlFormLink',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "linkValue",
    type: "object",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$matrixComp = {
  component: 'c$matrixComp', icon: DFT_ICONS.matrix, name: '矩阵', tip: '矩阵', micro: true,
  def: getPageFormDef({
    name: '表单矩阵组件',
    compName: "c$matrixComp",
    // value: "matrixValue",
    model: {
      value: {
        var: "matrixValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '矩阵',
      _node: 'c$matrix',
      _type: 'JzlFormMatrix',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "matrixValue",
    type: "number",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$mbComp = {
  component: 'c$mbComp',
  icon: DFT_ICONS.mb,
  name: '码表',
  tip: '码表',
  micro: true,
  def: getPageFormDef({
    name: '表单码表组件',
    compName: "c$mbComp",
    // value: "mbValue",
    model: {
      value: {
        var: "mbValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '码表',
      _node: 'c$mb',
      _type: 'JzlFormMb',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "mbValue",
    type: "string",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$selectComp = {
  component: 'c$selectComp',
  icon: DFT_ICONS.mb,
  name: '下拉',
  tip: '下拉',
  micro: true,

  def: getPageFormDef({
    name: '表单码表组件',
    compName: "c$selectComp",
    value: "selectValue",
    model: {
      value: {
        var: "selectValue",
        mode: "model",
        label: "数据变量"
      },
      options: {
        var: "selectList",
        mode: "model",
        label: "选项变量"
      }
    },
    _ext: { label: "label", value: "value", transformFn: "transformFn" },
    // compExt: {optionsDef: "selectList", labelDef: "label", valueDef: "value"},
    input: {
      _name: '下拉',
      _node: 'c$select',
      _type: 'JzlPageSelect',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "selectValue",
    type: "string",
    default: null,
    force: true,
    initType: "static"
  }, {
    prop: "selectList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      label: "Select 1",
      value: "A"
    }, {
      label: "Select 2",
      value: "B"
    }, {
      label: "Select 3",
      value: "C"
    }]
  }],
};

const c$cascaderComp = {
  component: 'c$cascaderComp',
  icon: DFT_ICONS.mb,
  name: '级联',
  tip: '级联',
  micro: true,

  def: getPageFormDef({
    name: '表单级联组件',
    compName: "c$cascaderComp",
    // value: "cascaderValue",
    model: {
      value: {
        var: "cascaderValue",
        mode: "model",
        label: "数据变量"
      },
      options: {
        var: "cascaderList",
        mode: "input",
        label: "选项列表"
      }
    },
    _ext: { label: "label", value: "value", children: "children", transformFn: "" },
    // compExt: {optionsDef: "cascaderList", labelDef: "label", valueDef: "value", childrenDef: "children"},
    input: {
      _name: '级联',
      _node: 'c$cascader',
      _type: 'JzlPageCascader',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "cascaderValue",
    type: "string",
    default: null,
    force: true,
    initType: "static"
  }, {
    prop: "cascaderList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      label: "Cascader A",
      value: "A",

      children: [{
        label: "Cascader A1",
        value: "A1"
      }, {
        label: "Cascader A2",
        value: "A2"
      }]
    }, {
      label: "Cascader B",
      value: "B",

      children: [{
        label: "Cascader B1",
        value: "B1"
      }, {
        label: "Cascader B2",
        value: "B2"
      }]
    }, {
      label: "Cascader C",
      value: "C"
    }]
  }],
};

const c$numberComp = {
  component: 'c$numberComp',
  icon: DFT_ICONS.number,
  name: '数字',
  tip: '数字',
  micro: true,
  def: getPageFormDef({
    name: '表单数字组件',
    compName: "c$numberComp",
    // value: "numberValue",
    model: {
      value: {
        var: "numberValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '数字',
      _node: 'c$number',
      _type: 'JzlFormNumber',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "numberValue",
    type: "number",
    default: 0,
    force: true,
    initType: "static"
  }]
};

const c$phoneComp = {
  component: 'c$phoneComp',
  icon: DFT_ICONS.phone,
  name: '电话',
  tip: '电话',
  micro: true,
  def: getPageFormDef({
    name: '表单电话组件',
    compName: "c$phoneComp",
    // value: "phoneValue",
    model: {
      value: {
        var: "phoneValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '电话',
      _node: 'c$phone',
      _type: 'JzlFormPhone',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "phoneValue",
    type: "string",
    default: "",
    force: true,
    initType: "static"
  }]
};

const c$radioComp = {
  component: 'c$radioComp',
  icon: DFT_ICONS.radio,
  name: '单选',
  tip: '单选',
  micro: true,
  def: getPageFormDef({
    name: '表单单选组件',
    compName: "c$radioComp",
    // value: "radioValue",
    model: {
      value: {
        var: "radioValue",
        mode: "model",
        label: "数据变量"
      },
      options: {
        var: "radioList",
        mode: "input",
        label: "选项列表变量"
      }
    },
    _ext: { label: "label", value: "value", transformFn: "transformFn" },
    // compExt: {optionsDef: "radioList", labelDef: "label", valueDef: "value"},
    input: {
      _name: '单选',
      _node: 'c$radio',
      _type: 'JzlFormRadio',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "radioValue",
    type: "string",
    default: "A",
    force: true,
    initType: "static"
  }, {
    prop: "radioList",
    type: "json",
    default: null,
    force: true,
    initType: "static",
    defaultJson: [{
      label: "A",
      value: "A"
    }, {
      label: "B",
      value: "B"
    }, {
      label: "C",
      value: "C"
    }]
  }]
};

const c$roleComp = {
  component: 'c$roleComp', icon: DFT_ICONS.role, name: '角色', tip: '角色', micro: true,
  def: getPageFormDef({
    name: '表单角色组件',
    compName: "c$roleComp",
    // value: "roleValue",
    model: {
      value: {
        var: "roleValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '角色',
      _node: 'c$role',
      _type: 'JzlFormRole',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "roleValue",
    type: "number",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$signComp = {
  component: 'c$signComp', icon: DFT_ICONS.sign, name: '签名', tip: '签名', micro: true,
  def: getPageFormDef({
    name: '表单签名组件',
    compName: "c$signComp",
    // value: "signValue",
    model: {
      value: {
        var: "signValue",
        mode: "model",
        label: "数据变量"
      }
    },
    // compExt: { options: "options" },
    input: {
      _name: '签名',
      _node: 'c$sign',
      _type: 'JzlFormSign',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "signValue",
    type: "object",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$sliderComp = {
  component: 'c$sliderComp', icon: DFT_ICONS.swiper, name: '滑块', tip: '滑块', micro: true,
  def: getPageFormDef({
    name: '表单滑块组件',
    compName: "c$sliderComp",
    // value: "fsliderValue",
    model: {
      value: {
        var: "fsliderValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '滑块',
      _node: 'c$slider',
      _type: 'JzlFormSlider',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "fsliderValue",
    type: "number",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$switchComp = {
  component: 'c$switchComp',
  icon: DFT_ICONS.switch,
  name: '开关',
  tip: '开关',
  micro: true,
  def: getPageFormDef({
    name: '表单开关组件',
    compName: "c$switchComp",
    // value: "switchValue",
    model: {
      value: {
        var: "switchValue",
        mode: "model",
        label: "数据变量"
      }
    },
    _ext: { size: "20", activeColor: "red", inactiveColor: "#999" },
    input: {
      _name: '开关',
      _node: 'c$switch',
      _type: 'JzlFormSwitch',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "switchValue",
    type: "number",
    default: false,
    force: true,
    initType: "static"
  }]
};

const c$starComp = {
  component: 'c$starComp', icon: DFT_ICONS.star, name: '评价', tip: '评价', micro: true,
  def: getPageFormDef({
    name: '表单评分组件',
    compName: "c$starComp",
    // value: "starValue",
    model: {
      value: {
        var: "starValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '评分',
      _node: 'c$star',
      _type: 'JzlFormStar',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "starValue",
    type: "number",
    default: null,
    force: true,
    initType: "static"
  }]
};

const c$tagComp = {
  component: 'c$tagComp', icon: DFT_ICONS.tag, name: '标签', tip: '标签', micro: true,
  def: getPageFormDef({
    name: '表单标签组件',
    compName: "c$tagComp",
    // value: "tagValue",
    model: {
      value: {
        var: "tagValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '标签',
      _node: 'c$tag',
      _type: 'JzlFormTag',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "tagValue",
    type: "array",
    default: [],
    force: true,
    initType: "static"
  }]
};

const c$timeComp = {
  component: 'c$timeComp', icon: DFT_ICONS.time, name: '时间', tip: '时间', micro: true,
  def: getPageFormDef({
    name: '表单时间组件',
    compName: "c$timeComp",
    // value: "timeValue",
    model: {
      value: {
        var: "timeValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '时间',
      _node: 'c$time',
      _type: 'JzlFormTime',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "timeValue",
    type: "string",
    default: "",
    force: true,
    initType: "static"
  }]
};

const c$videoComp = {
  component: 'c$videoComp', icon: DFT_ICONS.video, name: '视频', tip: '视频', micro: true,
  def: getPageFormDef({
    name: '表单视频组件',
    compName: "c$timeComp",
    // value: "videoValue",
    model: {
      value: {
        var: "videoValue",
        mode: "model",
        label: "数据变量"
      }
    },
    input: {
      _name: '视频',
      _node: 'c$video',
      _type: 'JzlFormVideo',
      _ss: {},
      _sh: {},
      _se: ["input", "change", "focus", "blur"]
    }
  }),
  vars: [{
    prop: "videoValue",
    type: "string",
    default: "",
    force: true,
    initType: "static"
  }]
}

const c$jzlDatasComp = {
  component: 'c$jzlDatasComp',
  icon: DFT_ICONS.chartTable,
  name: '表数据',
  tip: 'JzlFormComp',
  micro: true,
  def: {
    _name: '表数据组件',
    _node: "c$jzlDatasComp",
    _type: "JzlDataList",
    _value: "form",
    _ss: {
      theme: "" // jzl-button--primary jzl-button--mini
    },
    _ext: {},
    _sh: {},
    _rh: false
  },
  vars: [{
    prop: "form",
    type: "json",
    default: null,
    force: true,
    initType: "api",
    iDis: true,
    iTypes: ['api'],
    label: "表单定义"
  }]
};

const c$jzlFormComp = {
  component: 'c$jzlFormComp',
  icon: DFT_ICONS.form,
  name: '表/详情',
  tip: 'JzlFormComp',
  micro: true,
  def: {
    _name: '表/详情组件',
    _node: "c$jzlFormComp",
    _type: "JzlDataForm",
    _value: "form",
    _ss: {
      theme: "" // jzl-button--primary jzl-button--mini
    },
    _ext: {
      dataIdDef: "dataId"
    },
    _sh: {},
    _rh: false
  },
  vars: [{
    prop: "form",
    type: "json",
    default: null,
    force: true,
    initType: "api",
    iDis: true,
    iTypes: ['api'],
    label: "表单定义"
  }, {
    prop: "dataId",
    type: "number",
    default: null,
    force: true,
    initType: "static",
    label: "数据ID，有数据ID则为修改数据"
  }]
};

const c$jzlPageSubComp = {
  component: 'c$jzlPageSubComp',
  icon: DFT_ICONS.page,
  name: '子页面',
  tip: 'JzlPageComp',
  micro: true,
  def: {
    _name: '页面组件',
    _node: "c$jzlPageSubComp",
    _type: "JzlPageSub",
    _ss: {
      theme: "" // jzl-button--primary jzl-button--mini
    },
    _ext: {
      pageCode: ""
    },
    _sh: {},
    _rh: false
  }
};

const c$chartCardComp = {
  component: 'c$chartCardComp',
  icon: DFT_ICONS.chartCard,
  name: '指标卡',
  tip: 'JzlChartCard',
  micro: true,
  def: {
    _name: '组件-报表指标卡',
    _node: "c$chartCardComp",
    _type: "JzlChartCard",
    // _value: "chartCard",
    model: {
      value: {
        var: "chartCard",
        mode: "model",
        label: "数据变量"
      }
    },
    _ss: {},
    _sh: {},
    _rh: false,
    item: {
      _name: '指标卡项',
      _type: 'list',
      _ss: {
        theme: 'ele-card-item'
      },
      _sh: {},
      _rh: false,
      _sort: ['label', 'value'],
      label: {
        _name: '指标名',
        _type: 'text',
        _value: 'label',
        _ss: {},
        _sh: {},
        _rh: false,
      },
      value: {
        _name: '指标值',
        _type: 'text',
        _value: 'value',
        _ss: {},
        _sh: {},
        _rh: false,
      }
    }
  },
  vars: [{
    prop: "chartCard",
    type: "table",
    default: null,
    force: true,
    initType: "static",
    defaultTable: [
      ["年销售额", "1999"],
      ["年利润额", "999"]
    ]
  }]
};

const c$chartTableComp = {
  component: 'c$chartTableComp',
  icon: DFT_ICONS.chartTable,
  name: '统计表',

  def: {
    _name: '组件-报表表格',
    _node: "c$chartTableComp",
    _type: "JzlChartTable",
    _value: "chartTable",
    model: {
      value: {
        var: "checkValue",
        mode: "model",
        label: "选项列表"
      },
      options: {
        var: "checkboxList",
        mode: "input",
        label: "选项列表"
      }
    },
    _ss: {},
    rowHeader: {
      _name: '表格标题',
      _ss: {},
      _tag: 'tr',
      cell: {
        _name: '标题项',
        _type: 'text',
        _tag: 'th',
        _ss: {}
      }
    },
    row: {
      _name: '表格行',
      _ss: {},
      _tag: 'tr',

      cell: {
        _name: '单元项',
        _type: 'text',
        _tag: 'td',
        _ss: {}
      },
      cellFirst: {
        _name: '第一列',
        _type: 'text',
        _tag: 'td',
        _ss: {}
      }
    },
    rowDouble: {
      _name: '双数行',
      _ss: {},
      _tag: 'tr',

      cell: {
        _name: '单元项',
        _type: 'text',
        _tag: 'td',
        _ss: {}
      },
      cellFirst: {
        _name: '第一列',
        _type: 'text',
        _tag: 'td',
        _ss: {}
      }
    }
  },
  vars: [{
    prop: "chartTable",
    type: "table",
    default: null,
    force: true,
    initType: "static",
    defaultTable: [
      ["日期", "销售量Table"],
      ["1月1日", "123"],
      ["1月2日", "1223"],
      ["1月3日", "2123"],
      ["1月4日", "4123"],
      ["1月5日", "3123"],
      ["1月6日", "7123"]
    ]
  }],
};

const c$chartBarComp = {
  component: 'c$chartBarComp',
  icon: DFT_ICONS.chartBar,
  name: '柱状图',
  def: {
    _name: '组件-柱状图',
    _node: "c$chartBarComp",
    _type: "JzlChartBar",
    // _value: "chartBar",
    model: {
      value: {
        var: "chartBar",
        mode: "model",
        label: "数据变量"
      }
    },
    _ext: {color: ["#63b2ee", "#76da91", "#f8cb7f", "#f89588", "#7cd6cf", "#9192ab", "#7898e1", "#efa666", "#eddd86", "#9987ce", "#63b2ee", "#76da91"]},
  },
  vars: [{
    prop: "chartBar",
    type: "table",
    default: null,
    force: true,
    initType: "static",
    defaultTable: [
      ["日期", "销售量"],
      ["1月1日", "13"],
      ["1月2日", "23"],
      ["1月3日", "23"],
      ["1月4日", "43"],
      ["1月5日", "18"],
      ["1月6日", "73"]
    ]
  }]
};

const c$chartLineComp = {
  component: 'c$chartLineComp',
  icon: DFT_ICONS.chartLine,
  name: '折线图',
  def: {
    _name: '组件-折线图',
    _node: "c$chartLineComp",
    _type: "JzlChartLine",
    // _value: "chartLine",
    model: {
      value: {
        var: "chartLine",
        mode: "model",
        label: "数据变量"
      }
    },
    _ext: {color: ["#63b2ee", "#76da91", "#f8cb7f", "#f89588", "#7cd6cf", "#9192ab", "#7898e1", "#efa666", "#eddd86", "#9987ce", "#63b2ee", "#76da91"]}
  },
  vars: [{
    prop: "chartLine",
    type: "table",
    default: null,
    force: true,
    initType: "static",
    defaultTable: [
      ["日期", "销售量Line", "口碑"],
      ["1月1日", "13", "25"],
      ["1月2日", "43", "38"],
      ["1月3日", "23", "49"],
      ["1月4日", "53", "22"],
      ["1月5日", "63", "66"],
      ["1月6日", "83", "73"]
    ]
  }],
};

const c$chartPieComp = {
  component: 'c$chartPieComp',
  icon: DFT_ICONS.chartPie,
  name: '饼图',

  def: {
    _name: '组件-饼图',
    _node: "c$chartPieComp",
    _type: "JzlChartPie",
    // _value: "chartPie",
    model: {
      value: {
        var: "chartPie",
        mode: "model",
        label: "数据变量"
      }
    },
    _ext: {color: ["#63b2ee", "#76da91", "#f8cb7f", "#f89588", "#7cd6cf", "#9192ab", "#7898e1", "#efa666", "#eddd86", "#9987ce", "#63b2ee", "#76da91"]},
  },
  vars: [{
    prop: "chartPie",
    type: "table",
    default: null,
    force: true,
    initType: "static",
    defaultTable: [
      ["日期", "销售量Line", "口碑"],
      ["1月1日", "13", "25"],
      ["1月2日", "23", "20"],
      ["1月3日", "43", "33"],
      ["1月4日", "61", "45"],
      ["1月5日", "36", "68"],
      ["1月6日", "85", "75"]
    ]
  }],
};

export default {
  div,
  box,
  text,
  icon,
  img,
  video,
  buttonComp,
  paginationComp,

  listComp,
  c$JzlListComp,
  c$navComp,
  sliderComp,
  gridComp,
  tabsComp,
  collapseComp,

  c$checkboxComp,
  c$colorComp,
  c$fileComp,
  c$editorComp,
  c$iconComp,
  c$idcardComp,
  c$imageComp,
  c$inputComp,
  c$linkComp,
  c$matrixComp,
  c$mbComp,
  c$selectComp,
  c$cascaderComp,
  c$numberComp,
  c$phoneComp,
  c$radioComp,
  c$roleComp,
  c$signComp,
  c$sliderComp,
  c$switchComp,
  c$starComp,
  c$tagComp,
  c$timeComp,
  c$videoComp,

  c$jzlDatasComp,
  c$jzlFormComp,
  c$jzlPageSubComp,

  c$chartCardComp,
  c$chartTableComp,
  c$chartBarComp,
  c$chartLineComp,
  c$chartPieComp
}
